<template>
  <div class="hotBuy">
    <!-- 顶部导航栏 -->
    <div class="top">
      <van-nav-bar
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
        <template #right>
          <van-icon name="share-o" size="1.5em" />
        </template>
      </van-nav-bar>
    </div>
    <div class="box">
      <!-- 商品信息 -->
      <div class="goodsMsg">
        <div><img :src="product?.img" alt="" /></div>
        <div class="msgRight">
          <div class="title">
            <van-text-ellipsis rows="2" :content="product.title" />
          </div>
          <div class="price">
            <span>到手价 ￥</span>
            <span>{{ product.price }}</span>
          </div>
        </div>
      </div>
      <!-- 抽取盲盒 -->
      <div class="getBox">
        <div class="buyBox">
          <van-grid square :column-num="3" center >
            <van-grid-item
              v-for="item in product.qualities"
              :key="item._id"
              class="custom-grid-item"
            >
              <div class="triangle-shadow"></div>
              <div class="item-number">{{ item.level }}</div>
              <img :src="item.img" alt="Product image" class="product-image" />
            </van-grid-item>
          </van-grid>
          <div class="id">编号：{{ product._id }}</div>
          <div class="selectOne">请选择一个盲盒</div>
          <div class="buyBtn">
            <van-button type="default">换一盒</van-button>
            <van-button type="default" @click="buyAllBox">端整盒</van-button>
          </div>
        </div>
      </div>
      <!-- 商品详情 -->
      <van-floating-panel v-model:height="height" class="float">
        <van-cell-group>
          <div>
            <div class="details">商品详情</div>
            <div>
              <img
                src="https://img.alicdn.com/imgextra/i2/528524020/O1CN01g783ca1fZCzmZOyEi_!!528524020.jpg"
                alt=""
              />
              <img
                src="https://img.alicdn.com/imgextra/i1/528524020/O1CN01YOPPYw1fZCzsmQVL9_!!528524020.jpg"
                alt=""
              />
              <img
                src="https://img.alicdn.com/imgextra/i1/528524020/O1CN01UPR0Pn1fZD2aUsZTB_!!528524020.jpg"
                alt=""
              />
              <img
                src="https://img.alicdn.com/imgextra/i3/528524020/O1CN015XIZ761fZD2X82gau_!!528524020.jpg"
                alt=""
              />
              <img
                src="https://img.alicdn.com/imgextra/i3/528524020/O1CN01FQnYvG1fZCzsOFOHm_!!528524020.jpg"
                alt=""
              />
            </div>
          </div>
        </van-cell-group>
      </van-floating-panel>
      <!-- 全买 -->
      <van-dialog
        v-model:show="show"
        :show-confirm-button="false"
        className="buyAllWindow"
        :close-on-click-overlay="true"
      >
        <div class="item">
          <img :src="product.img" alt="" />
          <div class="title">整盒购买</div>
          <div class="msg">
            一次性购买6个散盒，将享受连开福利，保证至少6个不重复
          </div>
          <van-button type="default" class="dzh" @click="buyAll">
            <span>￥{{ allMoney }}</span>
            &nbsp;
            <span>端整盒!</span>
          </van-button>
        </div>
      </van-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref,computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import apiRequest from "../../api";
import {generateOrderNumber} from '../../orderId'

const show = ref(false);

// 浮动面板高度
const height = ref(Math.round(0.3 * window.innerHeight));

const route = useRoute();
const router = useRouter();
const product = ref(null);
// 获取主页
const getGoodsMsg = async () => {
  try {
    const response = await apiRequest.get(
      `/home/getHostListByOne/${route.params.id}`
    );
    product.value = response.data;
    console.log(product.value);
  } catch (error) {
    console.error("Error fetching product details:", error);
    // 如果获取失败，尝试从 getMoreGoodsMsg 获取信息 
    getMoreGoodsMsg();
  }
};

const getMoreGoodsMsg = async () => {
  try {
    const response = await apiRequest.get(
      `/home/getHostMoreListByOne/${route.params.id}`
    );
    product.value = response.data;
    console.log(product.value);
  } catch (error) {
    console.error("Error fetching more product details:", error);
  }
};

getGoodsMsg();
const onClickLeft = () => {
  router.go(-1);
};
const onClickRight = () => {
  console.log("分享");
};

const buyAllBox = () => {
  show.value = !show.value;
};
const allMoney = computed(() => {
  return product.value ? product.value.price * 6 : 0;
});


import axios from "axios";
const buyAll = async()=>{
    const {data} = await axios.post('/home/alipay',{
        orderId: generateOrderNumber(),
        totalPrice: allMoney.value,
        name: product.value.title
      }
    )
      console.log(data);
      
    window.open(data.data.paymentUrl)

}

</script>

<style lang="scss" scoped>
.hotBuy {
  background-color: #fdeef3;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.box {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1em;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.top {
  --van-nav-bar-background: #fdeef3;
  --van-nav-bar-icon-color: black;
}
.goodsMsg {
  display: flex;
  .msgRight {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 1em;
  }
  .title {
    font-size: 1.2em;
    font-weight: bold;
  }
  .price {
    span {
      font-weight: bold;
      &:first-child {
        font-size: 0.9em;
      }
      &:last-child {
        font-size: 1.5em;
      }
    }
  }
  img {
    width: 8em;
  }
}
.getBox {
  margin-top: 2em;
  width: 100%;
  height: 500px;
  background-color: #ffffff;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  flex: 1;
  .buyBox {
    width: 90%;
    margin-top: 1em;
    display: flex;
    flex-direction: column;
    justify-content: space-between; // 使内容分布在顶部和底部
    height: 100%; // 确保 buyBox 填满 getBox
    .van-button {
      width: 40%; // 按钮宽度
      height: 40px; // 按钮高度
      font-size: 16px;
      font-weight: bold;

      // 自定义按钮样式
      &:first-child {
        background-color: #ffffff;
        color: #000000;
        border: 1px solid #000000;
      }

      &:last-child {
        background-color: #000000;
        color: #ffffff;
      }
    }
    .id {
      text-align: center;
      font-size: 15px;
      width: 100%;
      margin: 1em 0;
    }
    .selectOne {
      width: 100%;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 1em;
    }
  }
  .buyBtn {
    display: flex;
    justify-content: space-around;
  }
}
// 宫格样式
.custom-grid-item {
  position: relative;
  overflow: hidden;
  border: 1px solid #e0e0e0;

  .triangle-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 30px 0 0;
    border-color: rgba(0, 0, 0, 0.45) transparent transparent transparent;
    z-index: 1;
  }

  .item-number {
    position: absolute;
    top: 2px;
    left: 5px;
    color: white;
    font-size: 14px;
    font-weight: bold;
    z-index: 2;
  }

  .product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.float {
  --van-floating-panel-background: #fdeef3;
  .details {
    background-color: #fdeef3;
    font-size: 20px;
    font-weight: bold;
    padding: 1.1em 0;
  }
  img {
    width: 100%;
  }
}
// 买整盒样式
.buyAllWindow {
  .item {
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    .title {
      font-weight: bold;
    }
    .msg {
      text-align: center;
      width: 80%;
    }
    .dzh {
      width: 45%; // 按钮宽度
      height: 40px; // 按钮高度
      font-size: 16px;
      font-weight: bold;
      color: #ffffff;
      background-color: #000000;
      font-weight: bold;
      margin: 1em 0;
    }
  }
  img {
    width: 6em;
    margin: 2em 0;
  }
}
</style>